import { Chat, ContactList } from '@/components/ChatOnline';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import React, { useEffect, useState } from 'react';
import { useModel } from 'umi';
//
import { message } from 'antd';

const ChatOneline: React.FC<{}> = () => {
  // const [msgList, setMsgList] = useState([]);
  const { initialState } = useModel('@@initialState');
  const { currentUser } = initialState || {};
  const { socket1, userOnelineList1, updateMsgs, msgList1 } = useModel('chatModel', (model) => ({
    socket1: model.socket,
    userOnelineList1: model.userOnelineList,
    updateMsgs: model.updateMsgs,
    msgList1: model.msgList,
  }));
  // console.log(socket1, userOnelineList1, msgList1);

  const [userOnelineList, setUserOnelineList] = useState([]); // 在线用户
  const [contactUser, setContactUser] = useState({});
  const [msgList, setMsgList] = useState([]); // 在线用户

  useEffect(() => {
    // debugger;
    // console.log(msgList1);
    // console.log(userOnelineList1);
    setUserOnelineList(userOnelineList1);
    setMsgList(msgList1);
  }, [userOnelineList1, msgList1]);

  // useEffect(() => {
  //   socket1.onmessage = function (msg) {
  //     const randomNum = Math.floor(Math.random() * 1000);
  //     const date = dayjs().unix();

  //     console.log('收到数据====' + msg.data);
  //     const result = JSON.parse(msg.data);
  //     console.log(result);

  //     if (result.from !== undefined && result.from !== null) {
  //       const text = result.text;
  //       const tmpmes = {
  //         _id: md5(`${text}${date}${randomNum}`),
  //         date: date,
  //         to: currentUser.name,
  //         user: {
  //           id: result.from,
  //           // avatar: '//game.gtimg.cn/images/lol/act/a20201103lmpwjl/icon-ht.png',
  //           nickname: result.from,
  //           desc: '这是我的第一条信息',
  //         },
  //         message: { type: 'text', content: result.text },
  //       };
  //       console.log(msgList);
  //       setMsgList([...msgList, tmpmes]);
  //       updateMsgs(tmpmes);
  //     }
  //     //setMessage(msg.data);
  //   };
  //   socket1.onerror = function () {
  //     message.error('消息发送出错重新发送');
  //   };
  // }, [msgList]);
  return (
    <PageHeaderWrapper title={false} breadcrumb={undefined}>
      <div style={{ display: 'flex' }}>
        <div>
          <ContactList
            data={userOnelineList.filter((item) => item.id !== currentUser.name)}
            style={{
              marginRight: 10,
              height: 500,
              borderRadius: 5,
              overflow: 'hidden',
              width: 240,
            }}
            onSelect={(contact) => {
              setContactUser(contact);
            }}
          />
        </div>
        <div>
          <Chat
            contact={contactUser}
            me={{ id: currentUser.name }}
            chatList={
              contactUser.id === currentUser.name
                ? msgList
                : msgList.filter(
                    (item) => item.user.id === contactUser.id || item.to === contactUser.id,
                  )
            }
            onSend={(msg) => {
              // console.log(userOnelineList);
              // console.log(msg);
              // console.log(contactUser);
              // socket.send(inputValue);
              if (contactUser.id === undefined) {
                message.error('请先选择用户');
                return;
              }
              msg.to = contactUser.id;

              const tempMsg = {
                to: contactUser.id,
                text: msg.message.content,
              };
              console.log(tempMsg);
              updateMsgs([...msgList1, msg]);
              // 全局的值还是要跟新的

              // updateMsgs([...msgList, msg]);
              // setMsgList([...msgList, msg]);
              socket1.send(JSON.stringify(tempMsg));
            }}
            onEarlier={() => console.log('EarlierEarlier')}
            style={{
              width: 600,
              height: 500,
              borderRadius: 5,
            }}
          />
        </div>
      </div>
    </PageHeaderWrapper>
  );
};

export default ChatOneline;
